<template>
	<view>
		<view
			style="display: flex;justify-content: space-between;margin-top:30rpx;padding-top: 10rpx;padding: 10rpx;border-radius: 10px;">
			<view style="display: flex;width: 100%;">
				<view>
					<image
						:src="(data!=null&&data.image!=null&&data.image.split(',').length>0)?data.image.split(',')[0]:'/static/images/未上传门店照片.png'"
						style="width: 140rpx;height: 140rpx;border-radius: 8px;" @click="previewImage()">
					</image>
				</view>
				<view class="margin-left" style="width: 100%;">
					<view style="display: flex;justify-content: space-between;">
						<view style="font-size: 32rpx;font-weight: bold;color: #636161;">
							{{data.title||"请先选择门店"}}
						</view>
						<view style="display: flex;">
							<image src="@/static/images/导航(2).png" @click="Navigation"
								style="width:43rpx;height: 43rpx;margin-left: 20rpx;"></image>

							<image src="@/static/images/拨号(2).png" @click="call"
								style="width:40rpx;height: 40rpx;margin-left: 20rpx;">
							</image>
						</view>
					</view>
					<view style="font-size: 24rpx;margin-top: 6rpx;color: #999;">{{data.addres||""}}<text
							class="margin-left-xs ">{{data.distance>1000?((data.distance/1000).toFixed(1)+"公里"):(data.distance==null?"请先选择门店":data.distance+"米")}}</text>

					</view>
					<view style="font-size: 24rpx;margin-top: 20rpx;color: #999;">
						<text :class="{'mendianTap':true,'bg-green-fan':data.isidle==0,'bg-red':data.isidle>0}  "
							style="border-width: 0px;padding: 3rpx 10rpx;">{{data.isidle>0?'紧张':'空闲'}}</text>
						<text class="mendianTap" v-for="item in data.tag">{{item}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "storeItem",
		props: {
			data: {
				type: Object,
				default: function() {
					return {
						title: '店铺名称店铺名称',
						phone: 17607080935,
						image: '@/static/images/dianpu1.jpg',
						addres: '成都市财富又一城商城2楼19号',
						distance: '100',
						isidle: 0,
						tag: ['可吸烟', '好停车', '有厕所']
					}
				},
			}
		},
		onShow() {
			this.init()
		},
		data() {
			return {
				location: {}
			};
		},
		methods: {

			Navigation() {
				uni.navigateTo({
					url: "/pages/common/MapNavigation/MapNavigation?id=" + this.data.id
				})
			},
			init() {
				this.location = storage.get("location")
			},
			/**
			 * 预览图片
			 */
			previewImage() {

				let imgList = (this.data != null && this.data.image != null && this.data.image.split(',').length > 0) ?
					this.data.image.split(
						',') : []
				uni.previewImage({
					current: imgList[0], // 当前显示的图片链接
					urls: imgList, // 需要预览的图片链接列表
					indicator: 'number'
				});
				// this.$emit("showImg", imgList)
			},
			call() {
				if (this.data.phone == null) {
					uni.showModal({
						title: "提示",
						content: "商家未正确配置联系方式,请从其他渠道联系商家",
						showCancel: false
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.data.phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(error) {
						console.log('拨打电话失败', error);
					}
				});

			}

		}
	}
</script>

<style>
	.mendianTap {
		margin-top: 5rpx;
		padding: 1px 4px;
		border: solid #999 1px;
		margin-right: 10rpx;
		margin-top: 5rpx;
		border-radius: 5px;
		margin-bottom: 5rpx;
	}
</style>